import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface DiscoveryItem {
  title: string;
  value: string | number;
  iconPath?: string;
  showProgress?: boolean;
  progressValue?: number;
  progressColor?: string;
  progressBackground?: string;
  progressBorderColor?: string;
}

export interface IntelligentDiscoveryProps {
  // 容器样式
  width?: number;
  height?: number;

  // 布局配置
  layout?: 'grid' | 'flex';
  gap?: number;

  // 事件
  onItemClick?: (item: DiscoveryItem, index: number) => void;
  onClick?: () => void;

  // 其他属性
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const IntelligentDiscovery = forwardRef<HTMLDivElement, IntelligentDiscoveryProps>((props, ref) => {
  const {
    // 容器样式
    width = 500,
    height = 400,
    borderRadius = 0,

    // 数据项配置
    discoveryItems,

    // 事件
    onItemClick,
    onClick,

    // 其他属性
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const containerStyle: React.CSSProperties = {
    width: width,
    height: height,
  };
  const handleItemClick = (item: DiscoveryItem, index: number) => {
    if (onItemClick) {
      onItemClick(item, index);
    }
  };

  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  const intelligentDiscoveryClassName = [
    'intelligent-discovery',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={intelligentDiscoveryClassName}
      style={containerStyle}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {discoveryItems.map((item, index) => (
        <div
          key={index}
          className="item-wrap"
          onClick={() => handleItemClick(item, index)}
        >
          <div className="item-title">{item.title}</div>
          <div className="item-icon" style={{backgroundImage: `url(${item.iconPath})`}}>
            <div className="value">{item.value}</div>
          </div>
        </div>
      ))}
    </div>
  );
});

IntelligentDiscovery.displayName = 'IntelligentDiscovery';

export default IntelligentDiscovery;
